<template>
    <div>
      <div class="live">
        <video
          id="video"
          class="video"
          src="files/videos/demo_2.mp4"
          muted
          autoPlay
          loop
        ></video>
        <canvas id="barrage" class="barrage"></canvas>
        <div id="miku" class="three"></div>
        <div id="heart" class="three"></div>
        <div id="logo" class="three"></div>
        <div
          v-if="
            this.state.loadingProcess === 100
              ? ''
              : `<div className='live_loading'>
              <div className='box'>{this.state.loadingProcess} %</div>
            </div>`
          "
        ></div>
  
        <div class="decorate">
          <i class="live_icon">虚拟直播</i>
          <div class="live_banner">
            <i class="icon"></i>
            <div class="title">
              <span class="text"
                >慢直播：初音未来在线直播,助力乡村振兴~~~~~~~~</span
              >
            </div>
          </div>
        </div>
        <div class="input_zone">
          <div class="tips"><b>150606</b>人正在看，已填装<b>84896</b>条弹幕！</div>
          <Input
            id="input"
            class="input"
            placeholder="输入“慢直播、虚拟主播、初音未来、安可、元宇宙、卡哇伊 ❤”等字样可以触发彩蛋哦！"
            @change="handleInputChange"
            @keyup="handleInputKeypress"
          />
          <Button class="send_button" @click="handleSend()">发送</Button>
        </div>
      </div>
    </div>
  </template>
  <script>
  import deomjs from "@/page/gozhibo/text";
  import { Barrage } from "@/page/gozhibo/barrage";
  import { barrageList } from "@/page/gozhibo/barrage";
  import axios from "axios";
  export default {
    data() {
      return {
        barrageList: barrageList,
        state: {
          loadingProcess: 0,
          inputValue: "",
        },
      };
    },
    components: {},
    mounted() {
      //this.getdata();
      this.theBride();
    },
    methods: {
      getdata() {
        let api = `http://192.168.56.1:3000/barrage`;
  
        this.$http
          .get(api)
          .then((response) => {
            this.barrageList = response.data.data;
  
            console.log(this.barrageList);
          })
          .catch((error) => {
            console.log(error);
          });
      },
      addbarrage(value, color, range) {
        axios({
          method: "post",
          url: "http://192.168.56.1:3000/addbarrage",
          data: {
              value: value,
            color: color,
            range: range,
          }
        })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      theBride() {
        Barrage("#barrage", barrageList);
      },
      handleInputKeypress(e) {
        if (e.keyCode === 13) {
          this.handleSend();
        }
      },
      handleInputChange(e) {
        this.state.inputValue = e.target.value;
      },
      handleSend() {
        let val = this.state.inputValue;
        // 发送弹幕
        this.barrageList.push({
          value: val,
          color: "red",
          range: [0.2, 1],
        });
        //this.addbarrage(val, "red", "[0.2, 1]");
        this.theBride();
        // 触发动画
        let keywordMap = [
          "慢直播",
          "虚拟主播",
          "初音未来",
          "安可",
          "元宇宙",
          "卡哇伊",
        ];
        keywordMap.map((item, index) => {
          if (val.includes(item)) {
            this.playAnimation(index);
          }
        });
        document.querySelector("#input").value = "";
      },
    },
    beforeDestroy(){
    try {
		scene.clear();
		renderer.dispose();
		renderer.forceContextLoss();
		renderer.content = null;
		cancelAnimationFrame(animationID) // 去除animationFrame
		let gl = renderer.domElement.getContext("webgl");
		gl && gl.getExtension("WEBGL_lose_context").loseContext();
	}catch (e) {
		console.log(e)
	}
  }
  };
  </script>
  
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  canvas {
    position: absolute;
    left: 0;
    top: 0;
  }
  .live_loading {
    z-index: 4;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: #00c6ff;
    background: -webkit-linear-gradient(to right, #0072ff, #00c6ff);
    background: linear-gradient(to right, #0072ff, #00c6ff);
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 64px;
    color: #ffffff;
    text-shadow: 0 1px 0 hsl(174, 5%, 80%), 0 2px 0 hsl(174, 5%, 75%),
      0 3px 0 hsl(174, 5%, 70%), 0 4px 0 hsl(174, 5%, 66%),
      0 5px 0 hsl(174, 5%, 64%), 0 6px 0 hsl(174, 5%, 62%),
      0 7px 0 hsl(174, 5%, 61%), 0 8px 0 hsl(174, 5%, 60%),
      0 0 5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.2),
      0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2),
      0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.3);
  }
  .live {
    position: relative;
  }
  .video {
    position: relative;
    top: 0;
    left: 0;
    height: 660px;
    width: 100%;
    z-index: -2;
    object-fit: cover;
  }
  .three {
    z-index: 1;
    position: fixed;
  }
  #miku {
    right: 0;
    bottom: 100px;
  }
  #logo {
    top: 0;
    left: 0;
  }
  #heart {
    left: 0;
    bottom: 200px;
  }
  .barrage {
    position: fixed;
    width: 100%;
    height: 400px;
    top: 0;
    left: 0;
    z-index: 999;
  }
  .decorate {
    position: absolute;
    top: 40px;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
  }
  .decorate .live_icon {
    display: inline-block;
    height: 32px;
    width: 78px;
    line-height: 32px;
    background: rgba(240, 50, 0, 0.8);
    font-size: 18px;
    position: absolute;
    right: 24px;
    top: 60px;
    text-decoration: none;
    font-style: normal;
    border-radius: 8px;
    color: #ffffff;
    filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.5));
    backdrop-filter: blur(2px);
    animation: blink 2.5s ease-in-out infinite;
  }
  .decorate .live_banner {
    width: 100%;
    position: absolute;
    bottom: 60px;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .decorate .live_banner .icon {
    display: inline-block;
    height: 160px;
    width: 160px;
    background: url("/public/images/banner.png") no-repeat center;
    background-size: 100% 100%;
    filter: drop-shadow(0px 1px 1px rgba(255, 255, 255, 0.5));
  }
  .decorate .live_banner .title {
    width: calc(100% - 160px);
    height: 56px;
    background: rgba(36, 120, 255, 0.3);
    padding: 0 24px;
    font-size: 28px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 56px;
    text-align: left;
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.25));
    backdrop-filter: blur(4px);
    overflow: hidden;
    margin: 0 100px 0 0;
  }
  .decorate .live_banner .title .text {
    display: inline-block;
    width: auto;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
    padding-left: 100%;
    padding-right: 100%;
  }
  
  .input_zone {
    position: fixed;
    z-index: 3;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #282c34;
  }
  .input_zone .tips {
    height: 100%;
    width: 300px;
    padding: 0 24px;
    text-align: left;
    line-height: 60px;
    font-size: 14px;
    color: #efefef;
  }
  .input_zone .tips b {
    padding: 4px;
    color: #596fec;
  }
  .input_zone .send_button {
    height: 32px;
    width: 100px;
    margin: 0 24px 0 8px;
    border-radius: 4px;
    font-size: 14px;
  }
  .input_zone .input {
    width: calc(100% - 400px);
    height: 32px;
    border-radius: 4px 0 0 4px;
    border-right: none;
    padding: 0 16px;
    box-sizing: border-box;
    cursor: text;
    transition: all 0.25s ease-in-out;
    font-size: 14px;
  }
  
  @-webkit-keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.2;
    }
    100% {
      opacity: 1;
    }
  }
  @-moz-keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.2;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.2;
    }
    100% {
      opacity: 1;
    }
  }
  
  @-webkit-keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  @-moz-keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  </style>
  